<template>
  <div class="offer">
    <div class="offer-banner">
      <img src="../../../assets/banner-price.png" alt="" />
      <p>根据您的需求</p>
      <p>我们提供合理优惠的版本服务</p>
    </div>
    <div class="offer-box">
      <h3>版本报价</h3>
      <ul>
        <li>
          <span>服务项目</span>
          <span>说明</span>
          <span>体验版</span>
          <span>标准版</span>
        </li>
        <li>
          <span>持证用户数</span>
          <span>持证人数，支持单用户持有多本工作证</span>
          <span>3用户</span>
          <span>50用户</span>
        </li>
        <li>
          <span>发证数量</span>
          <span>可为用户签发的工作证总数量</span>
          <span>10张</span>
          <span>不限</span>
        </li>
        <li>
          <span>模板样式</span>
          <span>丰富的工作证件模板，轻松配置，快速制证</span>
          <span>1套</span>
          <span>不限</span>
        </li>
        <li>
          <span>定时签发</span>
          <span>支持领用证件时效与证件有效期设置</span>
          <span class="span-blue">有</span>
          <span class="span-blue">有</span>
        </li>
        <li>
          <span>邀请领证</span>
          <span>支持用户主动申请领取工作证，管理员审核签发</span>
          <span class="span-blue">有</span>
          <span class="span-blue">有</span>
        </li>
        <li>
          <span>指定发证</span>
          <span>支持管理员指定发证用户，用户激活证件后启用</span>
          <span class="span-blue">有</span>
          <span class="span-blue">有</span>
        </li>
        <li>
          <span>电子签章</span>
          <span>核验工作证时可体现发证单位电子公章，彰显权威与可信</span>
          <span>无</span>
          <span class="span-blue">有</span>
        </li>
        <li>
          <span>市场价格</span>
          <span>支持定制化服务，请联系商务顾问获取报价</span>
          <span class="span-blue-bold">免费</span>
          <span class="span-blue-bold">3680元/年</span>
        </li>
        <li>
          <span>增加用户</span>
          <span>增加持证用户数</span>
          <span class="span-blue">100元/用户</span>
          <span class="span-blue">100元/用户</span>
        </li>
      </ul>
    </div>
    <div class="offer-lx">
      <p>没有合适的版本？</p>
      <p>欢迎拨打<span>400-6000-110</span>免费咨询</p>
    </div>
  </div>
</template>


<style lang="less" scoped>
.offer {
  &-banner {
    position: relative;
    width: 100%;
    height: 360px;
    img {
      width: 100%;
      height: 100%;
    }
    p {
      position: absolute;
      color: #ffffff;
      line-height: 17px;
      left: 360px;
    }
    p:nth-child(2) {
      font-size: 54px;
      font-weight: bold;
      letter-spacing: 3px;
      top: 108px;
    }
    p:last-child {
      font-size: 36px;
      letter-spacing: 4px;
      top: 190px;
    }
  }
  &-box {
    width: 1200px;
    margin: 78px auto 96px;
    box-sizing: border-box;
    h3 {
      font-size: 40px;
      line-height: 1;
      color: #222222;
      text-align: center;
      margin-bottom: 48px;
      font-weight: bold;
    }
    ul {
      //   border: 1px solid #e7e9eb;
      box-sizing: border-box;
      padding: 0;
      margin: 0;
      li {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        box-sizing: border-box;
        border-left: 1px solid #e7e9eb;
        border-right: 1px solid #e7e9eb;
        border-bottom: 1px solid #e7e9eb;
        span {
          font-size: 16px;
          color: #141820;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          padding: 15px 15px;
          box-sizing: border-box;
          border-right: 1px solid #e7e9eb;
          height: calc(100%);
          line-height: 28px;
          padding-left: 73px;
        }
        span:first-child {
          color: #6e7278;
          width: 215px;
        }
        span:nth-child(2) {
          width: 549px;
        }
        span:nth-child(3) {
          width: 217px;
        }
        span:last-child {
          width: 217px;
          border-right: none;
        }
        .span-blue {
          color: #3087ff;
        }
        .span-blue-bold {
          color: #3087ff;
          font-weight: bold;
        }
      }
      li:nth-child(Odd) {
        background: #f7f9fb;
      }
      li:first-child {
        background: rgba(231, 241, 255, 1);
        span {
          color: #141820;
          font-weight: bold;
        }
      }
    }
  }
}

.offer-lx {
  width: 100%;
  height: 240px;
  background: url('../../../assets/img-bg-version.png') no-repeat center;
  background-size: 100% 240px;
  padding-top: 69px;
  box-sizing: border-box;
  p {
    line-height: 1;
    color: #ffffff;
    text-align: center;
  }
  p:first-child {
    font-size: 32px;
    font-weight: bold;
  }
  p:last-child {
    font-size: 20px;
    span {
      display: inline-block;
      font-size: 28px;
      margin: 0 5px;
    }
  }
}
</style>